<script lang="ts" setup>
import menuitem from "./menuitem.vue"
import { ref } from 'vue'

interface ConfItem {
  title: string,
  path: string,
  imageUrl?: string;
  activeImageUrl?: string;
  isCollapsed?: boolean;
  children?: ConfItem[]
}

const { conf } = defineProps<{
  conf: ConfItem[]
}>()

const isCollapsed = ref(false)

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
  // 触发父组件的收缩事件
  emit('collapse', isCollapsed.value)
}

const emit = defineEmits(['collapse'])
</script>
<template>
  <div class="layout-container">
    <el-menu router default-active="2" class="el-menu-vertical-demo" :class="{ 'collapsed': isCollapsed }"
      :collapse="isCollapsed">
      <img :src="isCollapsed ? '../assets/logo.png' : '../assets/logo1.png'" alt="" class="img" />
      <menuitem v-for="item in conf" :key="item.path" :conf="item" :is-collapsed="isCollapsed" style="width: 100%;" />
      <div class="image" @click="toggleCollapse">
        <img :src="isCollapsed ? '../assets/image/outdent@3x(1).png' : '../assets/image/outdent@3x(3).png'" alt="">
      </div>
    </el-menu>
    <div class="content-wrapper" :class="{ 'content-collapsed': isCollapsed }">
      <slot name="content"></slot>
    </div>
  </div>
</template>
<style scoped>
.layout-container {
  display: flex;
  min-height: 100vh;
}

.el-menu-vertical-demo {
  position: relative;
  min-height: 100vh;
  height: 100%;
  background-color: rgb(13, 21, 32);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
  width: 200px;
  flex-shrink: 0;
  z-index: 10000;
}

.el-menu-vertical-demo.collapsed {
  width: 64px;
}

.content-wrapper {
  flex: 1;
  margin-left: 200px;
  transition: margin-left 0.3s ease;
}

.content-collapsed {
  margin-left: 64px;
}

.img {
  width: 90%;
  margin: 10px 0;
  transition: all 0.3s ease;
}

.el-menu-vertical-demo.collapsed .img {
  width: 60%;
}

.image {
  position: absolute;
  bottom: 15px;
  left: 19px;
  z-index: 100;
  cursor: pointer;
}

.hidden {
  display: none;
}
</style>